<template>
  <div class="card-body d-flex">
    <div class="me-3">
      <div class="avatar radius-4" :class="'avatar-' + name">
        <el-icon :color="nameColor[name]" ><component :is="nameIcon[name]" /></el-icon>
      </div>
    </div>              
    <div>
      <p class="mb-2">{{ label }}</p>
      <h4>{{ value }}</h4>
    </div>
  </div>
</template>

<script setup>
import { WindPower, LocationInformation, Bicycle } from '@element-plus/icons-vue'
  defineProps({
    name: String,
    label: String,
    value: String
  })

const nameColor = {
  status: 'rgb(77, 238, 234)',
  tx: 'rgb(249, 248, 113)',
  ty: 'rgb(249, 248, 113)',
  sx: '#43ce85',
  sy: '#43ce85',
}

const nameIcon = {
  status: WindPower,
  tx: LocationInformation,
  ty: LocationInformation,
  sx: Bicycle,
  sy: Bicycle
}


</script>

<style lang="scss" scoped>
.me-3 {
  margin-right: 1rem;
}
.mb-2 {
  margin-block-start: 0 !important;
  margin-block-end: .5rem;
  font-size: 13px !important;
  font-weight: 500;
  color: #dde5ed;
}
h4 {
  font-size: 16px;
  font-weight: 500;
  color: #dde5ed;
}
.avatar-status {
  background-color: rgb(77, 238, 234, .2);
}
.avatar-tx {
  background-color: rgba(249, 248, 113, .2);
}
.avatar-ty {
  background-color: rgba(249, 248, 113, .2);
}
.avatar-sx {
  background-color: #43ce8533;
}
.avatar-sy {
  background-color: #43ce8533;
}


</style>